
<template>
  <div class="box">
    <p>
      <input type="checkbox" id="cbox1" value="first_checkbox" />
      <label for="cbox1">This is the first checkbox</label>
    </p>
    <Son ref="son" meng="猫爷" />
    <hr />
    <p>{{ countTime }}</p>
    <button @click="start">go</button>
    <button @click="pause">stop</button>
    <button @click="testClickFn">test click useFn</button>
  </div>
  <XtxMessage text="组件用一用" type="error" />
  <p>
    <button @click="toggle">fullsreen</button>
    <button @click="Message({ text: 'msg!', time: 5000, type: 'success' })">
      message
    </button>
  </p>
  <ul>
    <li>{{ y }}</li>
    <li v-for="i in 10" :key="i">scroll{{ i }}</li>
  </ul>
</template>

<script setup>
/* eslint-disable no-unused-vars */
import Son from './son.vue'
/**
 * 了解虚拟DOM和渲染为真实DOM
 * # 创建虚拟DOM
 * 使用 createVNode(HTML 标签名、一个组件, attribute、prop 和事件相对应的对象, 使用字符串获取 "文本 Vnode"或子 VNodes, 使用 `h()` 构建)
 * 1. 创建html元素虚拟DOM
 * 2. 创建组件元素虚拟DOM
 *
 * # 渲染虚拟DOM
 * 使用render(vnode, 渲染位置的DOM对象)
 */
import { createVNode, render, onMounted } from 'vue'
import XtxMessag from '@/components/Message/index.vue'
import Message from '@/components/Message'

import { useCountDown } from '@/hooks'
import { useFullscreen, useWindowScroll } from '@vueuse/core'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

onMounted(() => {
  // 1. 创建html元素
  const h1 = createVNode('h1', { class: 'red', a: 1 }, ['我是虚拟DOM', 1])
  console.log(h1)
  // 2. 创建组件元素虚拟DOM
  const ms = createVNode(XtxMessag, { type: 'success', text: '请求错误！' })
  // console.log(ms)
  // 渲染
  render(h1, document.querySelector('.box'))
  // 覆盖上边的render元素
  render(ms, document.querySelector('.box'))
})

// 倒计时
const { countTime, start, pause } = useCountDown(10)

// 全屏
const { isFullscreen, enter, exit, toggle } = useFullscreen()
const { x, y } = useWindowScroll()

// 测试点击事件中使用use函数=>不能放到点击事件中使用
// const router = useRouter() // 点击事件之外可以
const testClickFn = () => {
  const router = useRouter()
  const store = useStore()
  console.log(router, store)
}

</script>

<style lang="less" scoped>
.box {
  border: 1px solid red;
}
/deep/ .red {
  color: red;
}
</style>
